<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加学生</title>
    <style>
        /* 全局样式 */
        /* 整体页面布局和通用样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* 表单样式 */
        .student-form {
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        /* 搜索框组样式 */
        .search-group {
            display: flex;
            margin-bottom: 15px;
        }

        .search-group input[type="search"] {
            flex: 1;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px 0 0 3px;
        }

        .search-group.search-btn {
            padding: 8px 15px;
            border: 1px solid #ccc;
            border-left: none;
            background-color: #007bff;
            color: #fff;
            border-radius: 0 3px 3px 0;
            cursor: pointer;
        }

        /* 各个表单元素组的通用样式 */
        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input[type="text"],
        .form-group input[type="date"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }

        /* 性别单选按钮组样式 */
        .radio-group {
            display: flex;
        }

        .radio-group input[type="radio"] {
            margin-right: 5px;
        }

        /* 提交按钮样式 */
        .form-group input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            padding: 10px 15px;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        /* 表格样式 */
        table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        }

        table th,
        table td {
            border: 1px solid #ccc;
            padding: 10px;
            text-align: center;
        }

        table th {
            background-color: #007bff;
            color: #fff;
        }

        table tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        table a {
            margin-right: 10px;
            color: #007bff;
            text-decoration: none;
        }

        table a:hover {
            text-decoration: underline;
        }
    </style>
</head>

<body>
<h1>添加学生</h1>
<form class="student-form" action="StudentServlet" method="post">
    <!-- 搜索框 -->
    <div class="search-group">
        <input type="search" placeholder="输入关键词搜索">
        <input type="submit" value="搜索" class="search-btn">
    </div>
    <!-- 姓名输入框 -->
    <div class="form-group">
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required />
    </div>

    <!-- 性别单选按钮 -->
    <div class="form-group">
        <label for="gender">性别：</label>
        <div class="radio-group">
            <input type="radio" id="male" name="gender" value="男" checked />
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="女" />
            <label for="female">女</label>
        </div>
    </div>

    <!-- 生日日期输入框 -->
    <div class="form-group">
        <label for="birthday">生日：</label>
        <input type="date" id="birthday" name="birthday" required />
    </div>

    <!-- 班级输入框 -->
    <div class="form-group">
        <label for="clazz">班级：</label>
        <input type="text" id="clazz" name="clazz" required />
    </div>

    <!-- 提交按钮 -->
    <div class="form-group">
        <input type="submit" value="添加学生" />
    </div>
</form>
</body>

<body>
<table border="1">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>生日</th>
        <th>班级</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${students}" var="stu">
        <tr>
            <td>${stu.id}</td>
            <td>${stu.name}</td>
            <td>${stu.gender}</td>
            <td>${stu.birthday}</td>
            <td>${stu.clazz}</td>
            <td>${stu.state}</td>
            <td>
                <a href="">编辑</a>
                <a href="">删除</a>
            </td>
        </tr>

    </c:forEach>
</table>
</body>
</html>